<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
  {{ message }}
  <p v-if="seen">现在你看到我了</p>

  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

  <ol>
  <div v-for="todo in todos" :key="todo.id">
   {{todo.id}} : 这里是todo的值:  {{todo.text}}
    </div>
  </ol>

  <div v-bind:class="{active: isActive,'text-danger':hasError}">v-bind:class</div>

<button v-bind:disabled="isButtonDisabled">Button</button>

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input v-model="loginName_userName" type="number" placeholder="Enter your username" key="username-input">
</template>

<template v-else>
  <label>Email</label>
  <input v-model="loginName_email" placeholder="Enter your email address" key="email-input">
</template>

<button @click="changeLoginType">切换登录方式</button>

<ul id="v-for-object" class="demo">
  <li v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>


<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox"> 选择是否要选中它： {{ checked }}</label>

</br>
</br>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

</br>
</br>
<div>这里是单选框</div>

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

</br>

<select v-model="selected2">
  <option v-for="option in options" :value="option.value" :key="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected2 }}</span>

<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post
  v-bind:s1="postFontSize"
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
  v-on:enlarge-text="postFontSize += $event"
  v-on:small-text="postFontSize -= $event"
></blog-post>
</div>

<br>

<alert-box>
  这里粗错了。
</alert-box>

</div>


</body>

<script type="text/javascript">

  Vue.component('blog-post', {
props: ['post','s1'],
template: `
  <div class="blog-post" >
    <h3>这里是标题 ：{{ post.title }} font size is: {{ s1 }} em</h3>
    <button v-on:click="$emit('enlarge-text',0.2)">
        Enlarge text
    </button>
    <button v-on:click="$emit('small-text',0.2)">
        small text
    </button>
    <div v-html="post.content"></div>
  </div>
`
});

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box" style="color:red">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
});

  var app = new Vue({
  el: '#app',
  data: {
    postFontSize: 1,
    posts: [
  { id: 1, title: 'My journey with Vue' ,content : '这里是内容11'},
  { id: 2, title: 'Blogging with Vue'  ,content : '这里是内容12' },
  { id: 3, title: 'Why Vue is so fun' ,content : '这里是内容13'}
],
    selected2:"A",
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ],
    selected:"",
    checked:false,
    checkedNames: [],
    counter:0,
    message: 'Hello Vue!' + '页面加载于 ' + new Date().toLocaleString(),
    seen: true,
    isButtonDisabled: true,
    todos: [
      { text: '学习 JavaScript',id: 1 },
      { text: '学习 Vue',id: 2 },
      { text: '整个牛项目',id: 3 }
    ],
    isActive: true,
    hasError: false,
    loginType: "username",
    loginName_userName: "123",
    loginName_email: "1234",
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  },
  methods: {
    changeLoginType:function() {
      if(this.loginType == "username") {
        this.loginType = "emailname"
      } else {
        this.loginType = "username"
      }
    }
  }
})

</script>

</html>
